<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>问答列表 - 筛选查询</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #4285f4;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      color: white;
      font-size: 20px;
    }
    
    /* 搜索栏 */
    .search-container {
      padding: 12px 15px;
      background-color: white;
      position: sticky;
      top: 57px;
      z-index: 99;
      border-bottom: 1px solid #eee;
    }
    
    .search-bar {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border: 1px solid #ddd;
      border-radius: 25px;
      font-size: 14px;
      outline: none;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 筛选工具栏 */
    .filter-toolbar {
      background-color: white;
      padding: 8px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }
    
    .filter-btn {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 14px;
      background: none;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
    }
    
    .filter-btn.active {
      color: #4285f4;
      background-color: #e8f0fe;
    }
    
    .filter-btn i {
      margin-right: 5px;
      font-size: 15px;
    }
    
    /* 高级筛选面板 */
    .advanced-filter {
      background-color: white;
      padding: 15px;
      border-bottom: 1px solid #eee;
      display: none;
    }
    
    .advanced-filter.show {
      display: block;
    }
    
    .filter-section {
      margin-bottom: 15px;
    }
    
    .filter-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #333;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .filter-option {
      padding: 5px 12px;
      background-color: #f5f5f5;
      border-radius: 15px;
      font-size: 13px;
      color: #666;
      cursor: pointer;
    }
    
    .filter-option.active {
      background-color: #4285f4;
      color: white;
    }
    
    .filter-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 10px;
    }
    
    .filter-action-btn {
      padding: 6px 15px;
      border-radius: 4px;
      font-size: 14px;
      border: none;
    }
    
    .reset-btn {
      background-color: #f5f5f5;
      color: #666;
    }
    
    .confirm-btn {
      background-color: #4285f4;
      color: white;
    }
    
    /* 分类导航 */
    .category-nav {
      background-color: white;
      padding: 10px 0;
      overflow-x: auto;
      white-space: nowrap;
      border-bottom: 1px solid #eee;
    }
    
    .category-item {
      display: inline-block;
      padding: 6px 15px;
      margin: 0 5px;
      font-size: 15px;
      color: #666;
      text-decoration: none;
      border-radius: 20px;
    }
    
    .category-item.active {
      background-color: #e8f0fe;
      color: #4285f4;
      font-weight: 500;
    }
    
    /* 问答列表容器 */
    .questions-container {
      padding: 10px 15px;
    }
    
    /* 筛选结果提示 */
    .filter-result {
      background-color: #e8f0fe;
      color: #4285f4;
      padding: 8px 15px;
      font-size: 13px;
      border-radius: 6px;
      margin: 0 15px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .clear-filter {
      color: #4285f4;
      background: none;
      border: none;
      font-size: 12px;
      text-decoration: underline;
    }
    
    /* 问答项通用样式 */
    .question-item {
      background-color: white;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 无图、单图、多图问答样式 */
    .question-no-img { }
    
    .question-single-img .question-image {
      width: 100%;
      border-radius: 8px;
      margin-bottom: 12px;
      height: 180px;
      object-fit: cover;
    }
    
    .question-multi-img .image-group {
      display: flex;
      gap: 5px;
      margin-bottom: 12px;
      height: 120px;
    }
    
    .question-multi-img .image-group img {
      flex: 1;
      height: 100%;
      border-radius: 6px;
      object-fit: cover;
    }
    
    /* 问答内容样式 */
    .question-header {
      display: flex;
      margin-bottom: 10px;
      align-items: center;
    }
    
    .question-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .question-author {
      font-weight: 500;
      font-size: 14px;
      margin-bottom: 2px;
    }
    
    .question-time {
      font-size: 12px;
      color: #999;
    }
    
    .question-tag {
      display: inline-block;
      padding: 2px 8px;
      background-color: #e8f0fe;
      color: #4285f4;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 6px;
      margin-bottom: 8px;
    }
    
    .question-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .question-content {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 12px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .question-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      color: #999;
    }
    
    .question-stats {
      display: flex;
      gap: 15px;
    }
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .question-actions {
      display: flex;
      gap: 15px;
    }
    
    .action-item {
      color: #999;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    .action-item.active {
      color: #ea4335;
    }
    
    /* 底部导航和提问按钮 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 95;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #4285f4;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    .ask-btn {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #4285f4;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      box-shadow: 0 3px 10px rgba(66, 133, 244, 0.4);
      border: none;
      cursor: pointer;
      z-index: 90;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px 0;
      color: #4285f4;
      font-size: 15px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <button class="btn btn-link p-0 nav-btn" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">问答社区</h1>
    <button class="btn btn-link p-0 nav-btn">
      <i class="fa fa-bell-o"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-container">
    <div class="search-bar">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索问题或关键词...">
    </div>
  </div>
  
  <!-- 筛选工具栏 -->
  <div class="filter-toolbar">
    <button class="filter-btn" id="sortBtn">
      <i class="fa fa-sort"></i> 排序
    </button>
    <button class="filter-btn" id="filterBtn">
      <i class="fa fa-filter"></i> 筛选
    </button>
    <button class="filter-btn" id="viewBtn">
      <i class="fa fa-th-large"></i> 视图
    </button>
  </div>
  
  <!-- 高级筛选面板 -->
  <div class="advanced-filter" id="advancedFilter">
    <!-- 排序选项 -->
    <div class="filter-section" id="sortOptions">
      <div class="filter-title">排序方式</div>
      <div class="filter-options">
        <div class="filter-option active" data-sort="latest">最新发布</div>
        <div class="filter-option" data-sort="hot">热门推荐</div>
        <div class="filter-option" data-sort="most-answers">回答最多</div>
        <div class="filter-option" data-sort="most-views">浏览最多</div>
      </div>
    </div>
    
    <!-- 内容筛选 -->
    <div class="filter-section" id="contentFilter">
      <div class="filter-title">内容类型</div>
      <div class="filter-options">
        <div class="filter-option active" data-type="all">全部内容</div>
        <div class="filter-option" data-type="text">纯文字</div>
        <div class="filter-option" data-type="image">含图片</div>
      </div>
    </div>
    
    <!-- 时间筛选 -->
    <div class="filter-section">
      <div class="filter-title">时间范围</div>
      <div class="filter-options">
        <div class="filter-option active" data-time="all">全部时间</div>
        <div class="filter-option" data-time="today">今天</div>
        <div class="filter-option" data-time="week">本周</div>
        <div class="filter-option" data-time="month">本月</div>
        <div class="filter-option" data-time="year">今年</div>
      </div>
    </div>
    
    <!-- 筛选操作按钮 -->
    <div class="filter-actions">
      <button class="filter-action-btn reset-btn" id="resetFilter">重置</button>
      <button class="filter-action-btn confirm-btn" id="confirmFilter">确认筛选</button>
    </div>
  </div>
  
  <!-- 分类导航 -->
  <div class="category-nav">
    <a href="#" class="category-item active">全部问题</a>
    <a href="#" class="category-item">旅行</a>
    <a href="#" class="category-item">科技</a>
    <a href="#" class="category-item">美食</a>
    <a href="#" class="category-item">健康</a>
    <a href="#" class="category-item">教育</a>
    <a href="#" class="category-item">职场</a>
    <a href="#" class="category-item">情感</a>
    <a href="#" class="category-item">法律</a>
  </div>
  
  <!-- 筛选结果提示 -->
  <div class="filter-result" id="filterResult" style="display: none;">
    <div>已筛选：最新发布 · 全部内容 · 全部时间</div>
    <button class="clear-filter" id="clearAllFilter">清除筛选</button>
  </div>
  
  <!-- 问答列表 -->
  <div class="questions-container" id="questionsContainer">
    <!-- 无图问答 -->
    <div class="question-item question-no-img" data-type="text" data-category="旅行" data-time="2h">
      <div class="question-header">
        <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="question-avatar">
        <div>
          <div class="question-author">旅行者小A</div>
          <div class="question-time">2小时前</div>
        </div>
      </div>
      
      <span class="question-tag">旅行</span>
      <h3 class="question-title">云南丙察察公路现在路况如何？普通SUV能通行吗？</h3>
      <p class="question-content">计划下个月自驾去丙察察，不知道现在路况怎么样，我的车是普通城市SUV，没有四驱功能，能顺利通过吗？需要准备哪些装备？</p>
      
      <div class="question-footer">
        <div class="question-stats">
          <div class="stat-item">
            <i class="fa fa-comment-o"></i>
            <span>12回答</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-eye"></i>
            <span>356浏览</span>
          </div>
        </div>
        <div class="question-actions">
          <div class="action-item">
            <i class="fa fa-thumbs-o-up"></i>
            <span>24</span>
          </div>
          <div class="action-item">
            <i class="fa fa-bookmark-o"></i>
            <span>收藏</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 单图问答 -->
    <div class="question-item question-single-img" data-type="image" data-category="美食" data-time="1d">
      <div class="question-header">
        <img src="https://picsum.photos/100/100?random=2" alt="用户头像" class="question-avatar">
        <div>
          <div class="question-author">美食爱好者</div>
          <div class="question-time">昨天 15:30</div>
        </div>
      </div>
      
      <span class="question-tag">美食</span>
      <h3 class="question-title">请问这是什么菌菇？在云南山区采到的，能食用吗？</h3>
      <p class="question-content">周末在云南山区徒步时发现的这种菌菇，颜色很特别，闻起来有淡淡的香味，不知道是否可以食用？有没有认识的朋友帮忙鉴别一下？</p>
      
      <img src="https://picsum.photos/800/500?random=10" alt="菌菇图片" class="question-image">
      
      <div class="question-footer">
        <div class="question-stats">
          <div class="stat-item">
            <i class="fa fa-comment-o"></i>
            <span>8回答</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-eye"></i>
            <span>782浏览</span>
          </div>
        </div>
        <div class="question-actions">
          <div class="action-item">
            <i class="fa fa-thumbs-o-up"></i>
            <span>46</span>
          </div>
          <div class="action-item">
            <i class="fa fa-bookmark-o"></i>
            <span>收藏</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 多图问答 -->
    <div class="question-item question-multi-img" data-type="image" data-category="科技" data-time="3d">
      <div class="question-header">
        <img src="https://picsum.photos/100/100?random=3" alt="用户头像" class="question-avatar">
        <div>
          <div class="question-author">摄影新手</div>
          <div class="question-time">3天前</div>
        </div>
      </div>
      
      <span class="question-tag">科技</span>
      <h3 class="question-title">新手选相机求推荐，预算5000左右，主要拍风景和人像</h3>
      <p class="question-content">最近想入门摄影，主要想拍旅行风景和朋友人像，预算5000元左右，不知道该选微单还是单反？有哪些型号值得推荐？希望大家给点建议。</p>
      
      <div class="image-group">
        <img src="https://picsum.photos/400/300?random=20" alt="相机参考图1">
        <img src="https://picsum.photos/400/300?random=21" alt="相机参考图2">
        <img src="https://picsum.photos/400/300?random=22" alt="相机参考图3">
      </div>
      
      <div class="question-footer">
        <div class="question-stats">
          <div class="stat-item">
            <i class="fa fa-comment-o"></i>
            <span>23回答</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-eye"></i>
            <span>1254浏览</span>
          </div>
        </div>
        <div class="question-actions">
          <div class="action-item">
            <i class="fa fa-thumbs-o-up"></i>
            <span>89</span>
          </div>
          <div class="action-item">
            <i class="fa fa-bookmark-o"></i>
            <span>收藏</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 无图问答 -->
    <div class="question-item question-no-img" data-type="text" data-category="职场" data-time="4d">
      <div class="question-header">
        <img src="https://picsum.photos/100/100?random=4" alt="用户头像" class="question-avatar">
        <div>
          <div class="question-author">职场新人</div>
          <div class="question-time">4天前</div>
        </div>
      </div>
      
      <span class="question-tag">职场</span>
      <h3 class="question-title">刚入职新公司，如何快速融入团队并建立良好的人际关系？</h3>
      <p class="question-content">上周刚入职一家新公司，团队里的人都很忙碌，不知道该如何快速融入进去。每天中午吃饭都是一个人，感觉有点尴尬，想知道大家有没有什么好的建议？</p>
      
      <div class="question-footer">
        <div class="question-stats">
          <div class="stat-item">
            <i class="fa fa-comment-o"></i>
            <span>37回答</span>
          </div>
          <div class="stat-item">
            <i class="fa fa-eye"></i>
            <span>2156浏览</span>
          </div>
        </div>
        <div class="question-actions">
          <div class="action-item">
            <i class="fa fa-thumbs-o-up"></i>
            <span>156</span>
          </div>
          <div class="action-item">
            <i class="fa fa-bookmark-o"></i>
            <span>收藏</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more" id="loadMore">
    <i class="fa fa-spinner fa-spin"></i> 加载更多问题
  </div>
  
  <!-- 提问按钮 -->
  <button class="ask-btn">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-question-circle-o nav-icon"></i>
      <span>问答</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选状态管理
    const filterState = {
      sort: 'latest',
      type: 'all',
      time: 'all',
      category: 'all'
    };
    
    // 筛选面板显示/隐藏
    const advancedFilter = document.getElementById('advancedFilter');
    const sortBtn = document.getElementById('sortBtn');
    const filterBtn = document.getElementById('filterBtn');
    
    [sortBtn, filterBtn].forEach(btn => {
      btn.addEventListener('click', () => {
        advancedFilter.classList.toggle('show');
        // 滚动到筛选面板
        if (advancedFilter.classList.contains('show')) {
          advancedFilter.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });
    
    // 筛选选项点击事件
    document.querySelectorAll('.filter-option').forEach(option => {
      option.addEventListener('click', function() {
        // 移除同组其他选项的active类
        this.parentElement.querySelectorAll('.filter-option').forEach(opt => {
          opt.classList.remove('active');
        });
        // 给当前选项添加active类
        this.classList.add('active');
        
        // 更新筛选状态
        const parentId = this.parentElement.parentElement.id;
        if (parentId === 'sortOptions') {
          filterState.sort = this.dataset.sort;
        } else if (parentId === 'contentFilter') {
          filterState.type = this.dataset.type;
        } else if (this.parentElement.parentElement.querySelector('.filter-title').textContent === '时间范围') {
          filterState.time = this.dataset.time;
        }
      });
    });
    
    // 确认筛选
    document.getElementById('confirmFilter').addEventListener('click', applyFilters);
    
    // 重置筛选
    document.getElementById('resetFilter').addEventListener('click', () => {
      // 重置所有筛选选项
      document.querySelectorAll('.filter-option').forEach(option => {
        option.classList.remove('active');
        if (option.dataset.sort === 'latest' || 
            option.dataset.type === 'all' || 
            option.dataset.time === 'all') {
          option.classList.add('active');
        }
      });
      
      // 重置筛选状态
      filterState.sort = 'latest';
      filterState.type = 'all';
      filterState.time = 'all';
      
      // 应用筛选
      applyFilters();
    });
    
    // 清除所有筛选
    document.getElementById('clearAllFilter').addEventListener('click', () => {
      // 重置分类
      document.querySelectorAll('.category-item').forEach(item => {
        item.classList.remove('active');
      });
      document.querySelector('.category-item').classList.add('active');
      filterState.category = 'all';
      
      // 重置其他筛选
      document.getElementById('resetFilter').click();
    });
    
    // 分类切换
    document.querySelectorAll('.category-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelectorAll('.category-item').forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        
        // 更新分类筛选状态
        filterState.category = this.textContent.trim() === '全部问题' ? 'all' : this.textContent.trim();
        
        // 应用筛选
        applyFilters();
      });
    });
    
    // 视图切换
    document.getElementById('viewBtn').addEventListener('click', function() {
      this.classList.toggle('active');
      const questionsContainer = document.getElementById('questionsContainer');
      
      if (this.classList.contains('active')) {
        // 网格视图
        questionsContainer.style.display = 'grid';
        questionsContainer.style.gridTemplateColumns = '1fr 1fr';
        questionsContainer.style.gap = '10px';
        this.innerHTML = '<i class="fa fa-list"></i> 视图';
      } else {
        // 列表视图
        questionsContainer.style.display = 'block';
        this.innerHTML = '<i class="fa fa-th-large"></i> 视图';
      }
    });
    
    // 应用筛选
    function applyFilters() {
      // 显示加载状态
      const loadMoreEl = document.getElementById('loadMore');
      loadMoreEl.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 筛选中...';
      
      // 隐藏筛选面板
      advancedFilter.classList.remove('show');
      
      // 模拟筛选延迟
      setTimeout(() => {
        const questions = document.querySelectorAll('.question-item');
        let visibleCount = 0;
        
        // 筛选问题
        questions.forEach(question => {
          const typeMatch = filterState.type === 'all' || question.dataset.type === filterState.type;
          const categoryMatch = filterState.category === 'all' || question.dataset.category === filterState.category;
          
          // 简单的时间筛选逻辑
          let timeMatch = true;
          if (filterState.time === 'today') {
            timeMatch = question.dataset.time === '2h';
          } else if (filterState.time === 'week') {
            timeMatch = ['2h', '1d', '3d', '4d'].includes(question.dataset.time);
          }
          
          // 应用筛选
          if (typeMatch && categoryMatch && timeMatch) {
            question.style.display = 'block';
            visibleCount++;
          } else {
            question.style.display = 'none';
          }
        });
        
        // 更新筛选结果提示
        const filterResult = document.getElementById('filterResult');
        const resultText = filterResult.querySelector('div');
        
        // 构建筛选结果文本
        const sortText = getSortText(filterState.sort);
        const typeText = getTypeText(filterState.type);
        const timeText = getTimeText(filterState.time);
        const categoryText = filterState.category === 'all' ? '' : ` · ${filterState.category}`;
        
        resultText.textContent = `已筛选：${sortText} · ${typeText} · ${timeText}${categoryText}`;
        filterResult.style.display = 'flex';
        
        // 恢复加载状态
        loadMoreEl.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载更多问题';
        
        // 如果没有匹配结果
        if (visibleCount === 0) {
          loadMoreEl.innerHTML = '没有匹配的问题';
          loadMoreEl.style.color = '#999';
        }
      }, 800);
    }
    
    // 辅助函数：获取排序文本
    function getSortText(sortValue) {
      const sortMap = {
        'latest': '最新发布',
        'hot': '热门推荐',
        'most-answers': '回答最多',
        'most-views': '浏览最多'
      };
      return sortMap[sortValue] || '最新发布';
    }
    
    // 辅助函数：获取类型文本
    function getTypeText(typeValue) {
      const typeMap = {
        'all': '全部内容',
        'text': '纯文字',
        'image': '含图片'
      };
      return typeMap[typeValue] || '全部内容';
    }
    
    // 辅助函数：获取时间文本
    function getTimeText(timeValue) {
      const timeMap = {
        'all': '全部时间',
        'today': '今天',
        'week': '本周',
        'month': '本月',
        'year': '今年'
      };
      return timeMap[timeValue] || '全部时间';
    }
    
    // 点赞和收藏功能
    document.querySelectorAll('.action-item').forEach(item => {
      if (item.querySelector('.fa-thumbs-o-up')) {
        item.addEventListener('click', function() {
          const icon = this.querySelector('i');
          const countEl = this.querySelector('span');
          let count = parseInt(countEl.textContent);
          
          if (icon.classList.contains('fa-thumbs-o-up')) {
            icon.classList.remove('fa-thumbs-o-up');
            icon.classList.add('fa-thumbs-up');
            this.classList.add('active');
            countEl.textContent = count + 1;
          } else {
            icon.classList.remove('fa-thumbs-up');
            icon.classList.add('fa-thumbs-o-up');
            this.classList.remove('active');
            countEl.textContent = count - 1;
          }
        });
      } else if (item.querySelector('.fa-bookmark-o')) {
        item.addEventListener('click', function() {
          const icon = this.querySelector('i');
          
          if (icon.classList.contains('fa-bookmark-o')) {
            icon.classList.remove('fa-bookmark-o');
            icon.classList.add('fa-bookmark');
            this.classList.add('active');
            alert('已收藏该问题');
          } else {
            icon.classList.remove('fa-bookmark');
            icon.classList.add('fa-bookmark-o');
            this.classList.remove('active');
            alert('已取消收藏');
          }
        });
      }
    });
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        const keyword = this.value.trim();
        if (keyword) {
          // 显示搜索状态
          document.getElementById('loadMore').innerHTML = `<i class="fa fa-spinner fa-spin"></i> 搜索"${keyword}"...`;
          
          setTimeout(() => {
            alert(`搜索结果：关于"${keyword}"的问题`);
            document.getElementById('loadMore').innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载更多问题';
          }, 800);
        }
      }
    });
    
    // 加载更多
    document.getElementById('loadMore').addEventListener('click', function() {
      this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        const container = document.querySelector('.questions-container');
        
        // 随机生成新问答
        const questionTypes = ['question-no-img', 'question-single-img', 'question-multi-img'];
        const randomType = questionTypes[Math.floor(Math.random() * questionTypes.length)];
        const dataType = randomType === 'question-no-img' ? 'text' : 'image';
        const categories = ['旅行', '科技', '美食', '健康', '教育', '职场'];
        const randomCategory = categories[Math.floor(Math.random() * categories.length)];
        
        let newQuestion = '';
        
        if (randomType === 'question-no-img') {
          newQuestion = `
            <div class="question-item question-no-img" data-type="${dataType}" data-category="${randomCategory}" data-time="5d">
              <div class="question-header">
                <img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}" alt="用户头像" class="question-avatar">
                <div>
                  <div class="question-author">健身爱好者</div>
                  <div class="question-time">5天前</div>
                </div>
              </div>
              
              <span class="question-tag">${randomCategory}</span>
              <h3 class="question-title">每天坚持30分钟有氧运动，一个月能瘦多少斤？</h3>
              <p class="question-content">最近开始减肥，每天晚上做30分钟有氧运动，饮食上稍微控制了一下，没有刻意节食，想知道这样坚持一个月大概能瘦多少斤？</p>
              
              <div class="question-footer">
                <div class="question-stats">
                  <div class="stat-item">
                    <i class="fa fa-comment-o"></i>
                    <span>15回答</span>
                  </div>
                  <div class="stat-item">
                    <i class="fa fa-eye"></i>
                    <span>876浏览</span>
                  </div>
                </div>
                <div class="question-actions">
                  <div class="action-item">
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>53</span>
                  </div>
                  <div class="action-item">
                    <i class="fa fa-bookmark-o"></i>
                    <span>收藏</span>
                  </div>
                </div>
              </div>
            </div>
          `;
        } else if (randomType === 'question-single-img') {
          newQuestion = `
            <div class="question-item question-single-img" data-type="${dataType}" data-category="${randomCategory}" data-time="6d">
              <div class="question-header">
                <img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}" alt="用户头像" class="question-avatar">
                <div>
                  <div class="question-author">植物爱好者</div>
                  <div class="question-time">6天前</div>
                </div>
              </div>
              
              <span class="question-tag">${randomCategory}</span>
              <h3 class="question-title">这盆植物叶子发黄是什么原因？该怎么补救？</h3>
              <p class="question-content">养了半年的绿萝最近叶子开始发黄，尤其是底部的叶子，不知道是浇水多了还是光照问题？有没有懂养花的朋友给指点一下？</p>
              
              <img src="https://picsum.photos/800/500?random=${Math.floor(Math.random() * 100)}" alt="植物图片" class="question-image">
              
              <div class="question-footer">
                <div class="question-stats">
                  <div class="stat-item">
                    <i class="fa fa-comment-o"></i>
                    <span>9回答</span>
                  </div>
                  <div class="stat-item">
                    <i class="fa fa-eye"></i>
                    <span>452浏览</span>
                  </div>
                </div>
                <div class="question-actions">
                  <div class="action-item">
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>28</span>
                  </div>
                  <div class="action-item">
                    <i class="fa fa-bookmark-o"></i>
                    <span>收藏</span>
                  </div>
                </div>
              </div>
            </div>
          `;
        } else {
          newQuestion = `
            <div class="question-item question-multi-img" data-type="${dataType}" data-category="${randomCategory}" data-time="7d">
              <div class="question-header">
                <img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}" alt="用户头像" class="question-avatar">
                <div>
                  <div class="question-author">铲屎官</div>
                  <div class="question-time">1周前</div>
                </div>
              </div>
              
              <span class="question-tag">${randomCategory}</span>
              <h3 class="question-title">请问这只小猫是什么品种？刚领养的，需要注意什么？</h3>
              <p class="content">昨天从救助站领养了这只小猫，大概两个月大，不知道是什么品种。第一次养猫，想知道需要准备哪些东西，喂养方面有什么需要注意的？</p>
              
              <div class="image-group">
                <img src="https://picsum.photos/400/300?random=${Math.floor(Math.random() * 100)}" alt="小猫图片1">
                <img src="https://picsum.photos/400/300?random=${Math.floor(Math.random() * 100)}" alt="小猫图片2">
                <img src="https://picsum.photos/400/300?random=${Math.floor(Math.random() * 100)}" alt="小猫图片3">
              </div>
              
              <div class="question-footer">
                <div class="question-stats">
                  <div class="stat-item">
                    <i class="fa fa-comment-o"></i>
                    <span>31回答</span>
                  </div>
                  <div class="stat-item">
                    <i class="fa fa-eye"></i>
                    <span>2356浏览</span>
                  </div>
                </div>
                <div class="question-actions">
                  <div class="action-item">
                    <i class="fa fa-thumbs-o-up"></i>
                    <span>178</span>
                  </div>
                  <div class="action-item">
                    <i class="fa fa-bookmark-o"></i>
                    <span>收藏</span>
                  </div>
                </div>
              </div>
            </div>
          `;
        }
        
        container.insertAdjacentHTML('beforeend', newQuestion);
        this.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载更多问题';
        
        // 重新应用当前筛选条件
        applyFilters();
        
        // 为新添加的元素绑定事件
        bindNewQuestionEvents();
      }, 1500);
    });
    
    // 为新添加的问答绑定事件
    function bindNewQuestionEvents() {
      const newItems = document.querySelectorAll('.action-item:not([data-bound])');
      newItems.forEach(item => {
        item.setAttribute('data-bound', 'true');
        
        if (item.querySelector('.fa-thumbs-o-up')) {
          item.addEventListener('click', function() {
            const icon = this.querySelector('i');
            const countEl = this.querySelector('span');
            let count = parseInt(countEl.textContent);
            
            if (icon.classList.contains('fa-thumbs-o-up')) {
              icon.classList.remove('fa-thumbs-o-up');
              icon.classList.add('fa-thumbs-up');
              this.classList.add('active');
              countEl.textContent = count + 1;
            } else {
              icon.classList.remove('fa-thumbs-up');
              icon.classList.add('fa-thumbs-o-up');
              this.classList.remove('active');
              countEl.textContent = count - 1;
            }
          });
        } else if (item.querySelector('.fa-bookmark-o')) {
          item.addEventListener('click', function() {
            const icon = this.querySelector('i');
            
            if (icon.classList.contains('fa-bookmark-o')) {
              icon.classList.remove('fa-bookmark-o');
              icon.classList.add('fa-bookmark');
              this.classList.add('active');
              alert('已收藏该问题');
            } else {
              icon.classList.remove('fa-bookmark');
              icon.classList.add('fa-bookmark-o');
              this.classList.remove('active');
              alert('已取消收藏');
            }
          });
        }
      });
    }
    
    // 提问按钮点击事件
    document.querySelector('.ask-btn').addEventListener('click', function() {
      alert('跳转到提问页面');
    });
    
    // 点击问答项进入详情页
    document.querySelectorAll('.question-item').forEach(item => {
      item.addEventListener('click', function(e) {
        if (!e.target.closest('.action-item')) {
          const title = this.querySelector('.question-title').textContent;
          alert(`进入问答详情页：${title}`);
        }
      });
    });
  </script>
</body>
</html>
